<template>
  <view class="container">
    <!--司机等待时间 -->
    <view v-if="obj.differ_sec != '0'" style="margin-bottom: 56rpx">
      <view style="font-weight: bold; font-size: 40rpx; color: #000000; text-align: center">
        <text>司机已等待</text>
        <text>{{ cuntdown }}</text>
      </view>
      <view style="font-weight: 500; font-size: 26rpx; color: #000000; margin-top: 14rpx; text-align: center">
        {{ list.waiting.waiting_time }}分钟内免费取消，超出部分{{ list.waiting.minute_amount }}元/分钟
      </view>
    </view>
    <view :class="{ item: true, common: act == index }" v-for="(item, index) in list" :key="item.id" @click="choose(item, index)">{{ item.name }}</view>

    <view class="btn">
      <view class="item1" @click="cancel">提交</view>
      <view class="item2" @click="goback">暂不取消</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      obj: {},
      act: 0,
      list: [],
      orderid: '',
      cuntdown: '',
      timer: null
    };
  },
  onLoad(opt) {
    if (opt.orderid) {
      this.orderid = opt.orderid;
    }

    this.getdetail();
    this.timer = setInterval(() => {
      this.getdetail();
    }, 1000);
  },
  onShow() {
    this.getlist();
  },
  methods: {
    // 当订单状态为4的时候获取等待时长
    getdetail() {
      this.http('/order/details', {
        order_id: this.orderid
      }).then((res) => {
        console.log(res);
        res.data;
        this.obj = res.data;
        if (res.data.differ_sec != '0') {
          let m = parseInt((res.data.differ_sec / 60) % 60);
          let s = parseInt(res.data.differ_sec % 60);
          m = m < 10 ? '0' + m : m;
          s = s < 10 ? '0' + s : s;
          this.cuntdown = m + ':' + s;
        }
      });
    },
    // 取消订单
    cancel() {
      this.http('/order/cancel', {
        order_id: this.orderid,
        con: this.list[this.act].name,
        type: 1
      }).then((res) => {
        uni.reLaunch({
          url: '/mine/myorder/myorder'
        });
      });
    },
    // 取消订单
    goback() {
      uni.navigateBack();
    },
    // 选择原因
    choose(item, index) {
      console.log(index);
      this.act = index;
    },
    // 获取订单取消原因
    getlist() {
      this.http('/index/cancel', {
        type: 1
      }).then((res) => {
        console.log('订单取消原因', res);
        this.list = res.data;
        console.log('赋值的列表', this.list);
      });
    }
  },
  onUnload() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },
  onHide() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  padding-top: 24rpx;
  .item {
    box-sizing: border-box;
    width: 702rpx;
    height: 100rpx;

    background: #ffffff;
    font-weight: 500;
    font-size: 30rpx;
    color: #000000;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    padding: 30rpx 34rpx 28rpx 34rpx;
    margin: 20rpx 24rpx;
  }
  .common {
    background: #ebf3ff;
    border-radius: 20rpx 20rpx 20rpx 20rpx;
    border: 2rpx solid #3483f6;
    font-weight: 500;
    font-size: 30rpx;
    color: #3483f6;
  }
  .btn {
    position: fixed;
    left: 48rpx;
    bottom: 200rpx;
    .item1 {
      width: 654rpx;
      height: 92rpx;
      background: #3483f6;
      text-align: center;
      line-height: 92rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #ffffff;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
    .item2 {
      width: 654rpx;
      height: 92rpx;
      background: #f2f2f2;
      text-align: center;
      line-height: 92rpx;
      font-weight: 500;
      font-size: 30rpx;
      color: #666666;
      margin-top: 24rpx;
      border-radius: 20rpx 20rpx 20rpx 20rpx;
    }
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
